<template>
	<view class="case-container card">
		<!-- 案例内容 -->
		<view class="header">
			<view class="title">
				案件
			</view>
			<view class="switch">
				<text class="label">上线状态</text>
				<wd-switch :before-change="doOnline" size="30rpx" active-color="#C91C1F" v-model="inOnline"
					:active-value="1" :inactive-value="0" />
			</view>
		</view>
		<view class="body">
			<view class="item" @click="goAsk()">
				<image class="item-bg" src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/case-1.png"></image>
				<view class="item-number">
					<view class="number">{{newCount}}</view>
					<!-- <view class="icon">付费</view> -->
				</view>
				<view class="item-title">
					最新咨询
				</view>

			</view>
			<view class="item" @click="goCase()">
				<image class="item-bg" src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/case-2.png"></image>
				<view class="item-number">
					<view class="number">{{seviceingCount}}</view>
					<!-- <view class="icon">付费</view> -->
				</view>
				<view class="item-title">
					服务中
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { ref, defineComponent, computed, watch } from 'vue';
	import useRouter from '@/hooks/useRouter.ts';
	import { useUserStore } from '@/store';
	import { onUpdateOnline } from "@/api/index"
	export default defineComponent({
		name: 'CaseComponent',
		props: {
			newCount: {
				type: Number,
				default: 0
			},
			seviceingCount: {
				type: Number,
				default: 0
			},
			online: {
				type: Number,
				default: 0
			},
		},
		setup(props, { attrs, slots, emit }) {
			const checked = ref(false); // 定义一个响应式变量，用于控制switch的状态
			const router = useRouter();
			const userStore = useUserStore();
			const myAskNums = computed(() => {
				return userStore.my_ask_nums;
			})
			const myCaseNums = computed(() => {
				return userStore.my_case_nums;
			})
			const goCase = () => {
				// 跳转到我的案件页面，需要根据实际情况进行调整。
				router.switchTab('/pages/order/order');
				uni.setStorageSync("order_type", 2)
			}
			const inOnline = ref(props.online); // 获取父组件传递的online属性值，并将其赋值给inOnline变量。
			watch(() => props.online, (newValue) => {
				inOnline.value = newValue; // 监听inOnline变量的变化，并更新其值。
			}, {
				deep: true,
				immediate: true,
			})
			const goAsk = () => {
				router.switchTab('/pages/im/im');
			}
			const doOnline = (e) => {
				console.log(e);
				onUpdateOnline({
					online: e.value,
				}).then(() => {
					// 更新成功后的操作，例如提示用户更新成功。 
					uni.$wdToast.show(e.value == 0 ? '下线成功' : '上线成功')
					e.resolve(true)
				})


			}
			return {
				checked, myAskNums, myCaseNums, goCase,
				doOnline,
				inOnline,
				goAsk

			}
		}
	});
</script>

<style scoped lang="scss">
	.case-container {
		margin-top: 20rpx; // 设置组件之间的间距
		// 样式定义
		padding: 20rpx; // 内边距
		width: calc(100% - 20rpx - 20rpx);

		.header {
			display: flex; // 使用flex布局，使标题和switch在同一行显示
			justify-content: space-between; // 使标题和switch分居两侧
			align-items: center; // 使标题和switch垂直居中
			padding-bottom: 10rpx; // 设置标题和switch之间的间距
			border-bottom: 2rpx solid #EEEEEE;

			.title {
				font-size: 16px; // 设置标题字体大小
				font-weight: bold; // 设置标题字体粗细
				position: relative; // 设置position属性，以便设置伪元素定位

				&::after {
					content: "";
					width: 60rpx;
					height: 4rpx;
					background: #C91C1F;
					display: inline-block;
					position: absolute;
					bottom: -15rpx;
					left: 0;
				}
			}

			.switch {
				margin-left: 10px; // 设置switch与标题之间的间距
				display: flex;
				align-items: center;

				.label {
					margin-right: 10px; // 设置switch与标题之间的间距	
					font-size: 28rpx;
				}
			}
		}

		.body {
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;

			.item {
				width: calc((100% - 30rpx) / 2);
				height: 160rpx;
				position: relative;

				&-bg {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;

				}

				&-number {
					font-family: FZLTCHK;
					font-size: 60rpx;
					color: #C91C1F;
					position: relative;
					z-index: 2;
					top: 30rpx;
					left: 10rpx;
					display: flex;

					align-items: flex-start;


					.number {
						line-height: 50rpx;
					}

					.icon {
						margin-left: 10rpx;
						padding: 5rpx 20rpx;
						background: #C91C1F;
						border-radius: 25rpx 25rpx 25rpx 0rpx;
						font-family: PingFang;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}
				}

				&-title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 24rpx;
					color: #C91C1F;
					position: relative;
					z-index: 2;
					top: 50rpx;
					left: 20rpx;
				}
			}

			.item:nth-child(2) {
				.item-title {
					color: #DB9E3F;
				}
			}
		}
	}
</style>